<template>
	<view class="login">
		<view class="login-main">
			<view class="login-tel">
				<text class="phone-number">手机号</text>
				<input type="text" placeholder="请输入11位的手机号" v-model="userTel">
			</view>
			<Lines/>
			<view 
			class="login-next" 
			:class="userTel.length==11?'bg-color':'bg-color-noactive'"
			@tap="goLoginCode"
			>下一步</view>
			<view class="checkebBox">
				<checkbox-group name="" @change="checkboxChange">
					<label>
						<checkbox :checked="isChecked"/><text>您已阅读，并同意</text><text class="f-active-color">《小周商铺服务协议》</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Lines from '../../components/common/Lines.vue'
	export default {
		data() {
			return {
				userTel:'18144158928',
				isChecked:false,
				// 手机号校验规则
				rules:{
					userTel:{
						rule:/^1[3456789]\d{9}$/,
						msg:"请输入11位手机号"
					}
				}
			}
		},
		components:{
			Lines
		},
		methods: {
			checkboxChange(){
				if(this.isChecked == false){
					this.isChecked = !this.isChecked
				}else{
					this.isChecked = !this.isChecked
				}
			},
			//判断验证是否符合要求
			validate(key){
				let bool = true;
				if(!this.rules[key].rule.test[this[key]]){
					uni.showToast({
						title:this.rules[key].msg,
						icon:"noen"
					})
					bool = false;
					return false
				}
				return bool
			},
			// 跳转到输入验证码页面
			goLoginCode(){
				// if(  !this.validate('userTel')  ) return;
				// 发起请求 验证点好号码是否存在
				if(this.isChecked){
					$http.request({
						url:"/registered",
						method:"POST",
						data:{
							phone:this.userTel
						}
					}).then((res)=>{
						
						if(!res.success){
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
							return ;
						}else{
							uni.navigateTo({
								url:"/pages/login-code/login-code?phone="+this.userTel+""
							})
						}
						
					}).catch(()=>{
						uni.showToast({
							title:'请求失败',
							icon:'none'
						})
					})
				}else{
					uni.showToast({
						title:"请勾选服务协议",
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style scoped>
.login{
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-main{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.login-tel{
	width: 750rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.phone-number{
	padding-left: 50rpx;
	width: 200rpx;
	color: #000000;
}
input {
	flex: 1;
	color: #000000;
}
.login-next{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 650rpx;
	height: 70rpx;
	border-radius: 50rpx;
	margin-top: 20rpx;
	color: white;
}
.checkebBox{
	margin-top: 20rpx;
}
</style>
